<template>
  <div id="public">
    <!--订单查询统计-->
    <div class="all-order">
      <span>
        <i class="el-icon-document-checked"></i>
        消费金币数：{{allProfit.goldNum}}
      </span>
      <span>
        <i class="el-icon-bank-card"></i>
        升级会员分润：{{allProfit.upgradeMember}}
      </span>
      <span>
        <i class="el-icon-document-delete"></i>
        上墙分润：{{allProfit.upperWall}}
      </span>
      <span>
        <i class="el-icon-document-delete"></i>
        表情分润：{{allProfit.expression}}
      </span>
      <span>
        <i class="el-icon-wallet"></i>
        总分润：{{allProfit.totalProfit}}
      </span>
    </div>
    <!--搜索-->
    <div class="search-content">
      <el-select v-model="agent" clearable placeholder="请选择代理名称" @change="inquiryList">
        <el-option
          v-for="item in agentList"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-input v-model="name" placeholder="请输入用户昵称查询" prefix-icon="el-icon-search" clearable @change="inquiryList"/>
      <el-input v-model="userName" placeholder="请输入用户名查询" prefix-icon="el-icon-search" clearable @change="inquiryList"/>

      <el-select v-model="type" clearable placeholder="请选择消费类型" @change="inquiryList">
        <el-option
          v-for="item in typeList"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-date-picker
        v-model="dateTimeRange"
        type="datetimerange"
        range-separator="至"
        clearable
        value-format="yyyy-MM-dd HH:mm:ss"
        @change="inquiryList"
        :picker-options="pickerOptions"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
      <el-button type="primary" icon="el-icon-search" @click="inquiryList">查询</el-button>
    </div>
    <!--操作列表-->
    <div class="table">
      <el-table fit :data="tableData" style="width: 100%">
        <el-table-column label="代理名称" prop="agent.name" align="center"/>
        <el-table-column label="用户昵称" prop="member.name" align="center"/>
        <el-table-column label="用户名称" prop="member.userName" align="center"/>
        <el-table-column label="消费金币数量" prop="goldNum" align="center"/>
        <el-table-column label="消费时间" prop="consumptionTime" width="170" align="center"/>
        <el-table-column label="消费类型" prop="type" width="100" align="center">
          <template slot-scope="scope">
            <el-tag size="small" v-if="scope.row.type==='upgradeMember'"  type="primary">升级会员</el-tag>
            <el-tag size="small" v-if="scope.row.type==='upperWall'" type="success">上墙</el-tag>
            <el-tag size="small" v-if="scope.row.type==='expression'" type="warning">购买表情</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="分润金额" prop="profit" align="center"/>
        <el-table-column label="消费备注" prop="remarks" width="300" align="center">
        <template slot-scope="scope">
        <span v-if="scope.row.remarks==null||scope.row.remarks.length<20">{{scope.row.remarks}}</span>

        <el-tooltip v-else :content="scope.row.remarks" placement="top">
        <span>{{scope.row.remarks.substring(0,19)+"..."}}</span>
        </el-tooltip>
        </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <div class="pagination">
        <el-pagination
          :current-page.sync="currentPage"
          :page-sizes="[10,20,30,40,50]"
          layout="total,sizes, prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
  import {Message} from 'element-ui';
  import request from "../../utils/request";
  import {parseTime} from "../../utils";
  export default {
    name: "goldConsumption",
    data() {
      return {
        // 查询
        agent:'',
        agentList:[],
        name: "",
        userName: "",
        type: null,
        typeList: [
          {
            value: 3,
            label: '升级会员'
          },
          {
            value: 4,
            label: '上墙'
          },
          {
            value: 7,
            label: '表情'
          }
        ],
        dateTimeRange: [],
        pickerOptions: {
              shortcuts: [
                  {
                      text: '今天',
                      onClick(picker) {
                          const end = new Date();
                          const start = new Date(end.getFullYear(), end.getMonth(), end.getDate(), 0, 0, 0);
                          picker.$emit('pick', [start, end]);
                      }
                  },
                  {
                      text: '昨天',
                      onClick(picker) {
                          const date = new Date();
                          date.setTime(date.getTime() - 3600 * 1000 * 24);
                          let start = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0);
                          let end = new Date(new Date().getFullYear(), new Date().getMonth(), date.getDate(), 23, 59, 59);
                          picker.$emit('pick', [start, end]);
                      }
                  },
                  {
                      text: '前天',
                      onClick(picker) {
                          const date = new Date();
                          date.setTime(date.getTime() - 3600 * 1000 * 24* 2);
                          let start = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0);
                          let end = new Date(new Date().getFullYear(), new Date().getMonth(), date.getDate(), 23, 59, 59);
                          picker.$emit('pick', [start, end]);
                      }
                  },
                  {
                      text: '本月',
                      onClick(picker) {
                          const end = new Date();
                          const start = new Date(end.getFullYear(), end.getMonth(), 1, 0, 0, 0);
                          picker.$emit('pick', [start, end]);
                      }
                  },
                  {
                      text: '上月',
                      onClick(picker) {
                          const date = new Date();
                          date.setTime(date.getTime() - 3600 * 1000 * 24 * 30);
                          let start = new Date(date.getFullYear(), date.getMonth(), 1, 0, 0, 0);
                          let end = new Date(new Date().getFullYear(), new Date().getMonth(), 1, 23, 59, 59);
                          end.setTime(end.getTime() - 3600 * 24 * 1000);
                          picker.$emit('pick', [start, end]);
                      }
                  },
                  {
                      text: '最近一周',
                      onClick(picker) {
                          const end = new Date();
                          const start = new Date();
                          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                          picker.$emit('pick', [start, end]);
                      }
                  },
                  {
                      text: '最近一个月',
                      onClick(picker) {
                          const end = new Date();
                          const start = new Date();
                          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                          picker.$emit('pick', [start, end]);
                      }
                  },
                  {
                      text: '最近三个月',
                      onClick(picker) {
                          const end = new Date();
                          const start = new Date();
                          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                          picker.$emit('pick', [start, end]);
                      }
                  }
              ]
          },
        isClearable: true,
        allProfit:{
          goldNum:0,
          upgradeMember:0,
          upperWall:0,
          expression:0,
          totalProfit:0
        },
        // 列表数据
        tableData: [],
        //分页
        currentPage: 1,
        pageSize: 10,
        total: 0
      }
    },
    mounted() {
        // const end = new Date();
        // const start = new Date(end.getFullYear(), end.getMonth(), 1, 0, 0, 0);
        // this.dateTimeRange = [parseTime(start), parseTime(end)];
        this.inquiryAgentList();
    },
    methods: {
      isNotNull(value) {
        return value !== null && value !== undefined && value !== "";
      },
      //查询代理下拉列表
      inquiryAgentList(){
        let that=this;
        request({
          method: 'get',
          url: 'admin/agent/all/select',
          headers: {
            'Content-Type': 'application/json;charset=UTF-8'
          }
        }).then(function (res) {
          if (res.code === 200) {
            let arr=res.data;
            if(arr.length>0){
              for (let i = 0; i <arr.length; i++) {
                that.agentList.push({
                  label:arr[i].name,
                  value:arr[i].id
                })
              }
            }
          }
        }).catch(function (error) {
          console.log(error);
        });
      },
      //查询列表
      inquiryList() {
        let that = this;
        that.tableData = [];
        if(!that.agent){
          Message.warning("请先选择一个代理名称");
          return false;
        }
        let data = {
          pageNumber: that.currentPage,
          pageSize: that.pageSize,
          filters: []
        };
        if (that.isNotNull(that.name)) { //用户昵称
          data.filters.push({
            property: "m.name",
            value: that.name,
            operator: "like"
          })
        }
        if (that.isNotNull(that.userName)) { //用户名称
          data.filters.push({
            property: "m.user_name",
            value: that.userName,
            operator: "eq"
          })
        }
        if (that.isNotNull(that.type)) { //消费类型
          data.filters.push({
            property: "gcr.change_type",
            value: that.type,
            operator: "eq"
          })
        }
        if (this.isNotNull(that.dateTimeRange)) { //消费时间
          data.filters.push({
            property: "gcr.create_date",
            value: that.dateTimeRange[0],
            operator: "ge"
          });
          data.filters.push({
            property: "gcr.create_date",
            value: that.dateTimeRange[1],
            operator: "le"
          })
        }
        request({
          method: 'post',
          url: "admin/profit/consumption/list/"+that.agent,
          headers: {
            'Content-Type': 'application/json;charset=UTF-8'
          },
          data: data
        }).then(function (res) {
          if (res.code === 200) {
            that.total = res.data.total;
            let arr = res.data.records;
            if (arr.length === 0) {
              that.tableData = [];
            } else {
              that.tableData = arr
            }
          }
        }).catch(function (error) {
          console.log(error);
        });
        //充值分润统计
        request({
          method: 'post',
          url: "admin/profit/consumption/count/"+that.agent,
          headers: {
            'Content-Type': 'application/json;charset=UTF-8'
          },
          data: data
        }).then(function (res) {
          if (res.code === 200) {
            that.allProfit=res.data;
          }
        }).catch(function (error) {
          console.log(error);
        });
      },
      // 改变每页显示的数量
      handleSizeChange(val) {
        this.pageSize = val;
        this.inquiryList();
      },
      //改变当前页
      handleCurrentChange(val) {
        this.currentPage = val;
        this.inquiryList();
      }
    }
  }
</script>

<style src="../../assets/css/agentProfitManagement/goldConsumption.css">

</style>
